<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习js设置css样式</title>
    <link rel="stylesheet" type="text/css" href="css/setDiv.css">
</head>
<body>
<div>
<div class="myhint">
    <p>请为下面的div设置样式：</p>
    <div class="setbutton" id="setButton">点击设置</div>
</div>
<div class="testdiv"></div>
<div class="blackDiv" id="blackDiv">
    <div class="setArea">
        <div class="oneline">
            <p>请选择背景颜色：</p>
            <div class="buttons" v-for="list in data.list" id="colorDiv">
                <div class="colorButton">红</div>
                <div class="colorButton">黄</div>
                <div class="colorButton">蓝</div>
            </div>
        </div>
        <div class="oneline">
            <p>请选择宽（px）：</p>
            <div class="buttons">
                <div class="colorButton">200</div>
                <div class="colorButton">300</div>
                <div class="colorButton">400</div>
            </div>
        </div>
        <div class="oneline">
            <p>请选择高（px）：</p>
            <div class="buttons">
                <div class="colorButton">200</div>
                <div class="colorButton">300</div>
                <div class="colorButton">400</div>
            </div>
        </div>
        <div class="cancel">
            <div class="recover">恢复</div>
            <div class="recover">确定</div>
        </div>
    </div>
</div>
</div>
<script src="./js/setDiv.js"></script>
</body>
</html>

<!--2016-12-07-->
<!--这是一个很简单的用dom操作div的例子-->